<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子组件事件传递</title>
		<script src="../libs/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="root">
			<h3>{{pageName}}</h3>
			<test-component ref='countOne' @change='handleCount'></test-component>
			<test-component ref='countTwo' @change='handleCount' ></test-component>
			
			<button>总计：{{total}} --- {{numbers}}</button>
		</div>
	</body>
	<script>
		Vue.component('test-component',
		{
			template:'<button @click="handleCount">测试{{count}}</button>',
			data:function(){
				return {
					count:0,
					number2: 0.0000101101
				}
			},
			methods:{
				handleCount:function(){
					this.count++;
					this.$emit('change');
				},
				writeMsg:function(){
					console.log('write children message');
				}
			}
		});
		var vm = new Vue({
			el:'#root',
			data:{
				pageName:'动态组件测试',
				total:0,
				numbers:0
			},
			methods:{  
				handleCount:function(){
					//console.log(this.$refs.countOne);
					//console.log(this.$refs.countTwo);
					//通过refs获取组建内部的数据data
					const count1 = this.$refs.countOne.count;
					const count2= this.$refs.countTwo.count;
					this.total = count1+count2;
					this.numbers = this.$refs.countOne.number2+this.$refs.countTwo.number2;
					//使用refs执行子组建内部的方法
					this.$refs.countOne.writeMsg();
				}
			}
			
		});
	</script>
</html>
